<template>
  <div id="index-page">
    <div class="header">
      <h1 class="title">
        <span class="part">My</span>
        <span class="part">Url</span>
        <span class="part">Shortener</span>
      </h1>
      <ul class="option-list">
        <li class="option-item">Docs<li>
        <li class="option-item">Help</li>
        <a href="//www.github.com" target="_blank">
          <li class="option-item">
            <img src="../../assets/images/png/GitHub-Mark-32px.png" alt="github icon">
          </li>
        </a>
        <a href="//www.gitee.com" target="_blank">
          <li class="option-item">
            <img style="width: 32px;" src="../../assets/images/png/gitee-icon.png" alt="github icon">
          </li>
        </a>
      </ul>
    </div>
    <div class="main">
      <p class="main-text">
        My-Url-Shortener
        <span class="tip-text">type less, get more</span>
      </p>
      <div class="main-input-area">
        <input type="text" class="text-input" placeholder="Type a url here, click button" v-model="originUrl"
               @keyup.enter="shorten" spellcheck="false">
        <span class="handle-button" @click="shorten">Shorten</span>
      </div>
      <div class="history-area">
        <div v-if="historyList.length !== 0">
          <div class="history-item" v-for="historyItem in historyList" :key="historyItem.time">
            <div class="urls-part">
              <p>Origin: {{historyItem.origin}}</p>
              <p>After : {{historyItem.shorten}}</p>
            </div>
            <div class="handle-button" @click="copyText(historyItem.shorten, $event)">
              Copy
            </div>
          </div>
        </div>
        <div v-else>
          <p style="text-align: center; color: #555555">No history yet, shorten one url.</p>
        </div>
      </div>
    </div>
    <div class="footer">
      <span class="copyright">
        Copyright @ 2021 MyUrlShortener All Rights Reserved.
      </span>
    </div>
  </div>
</template>

<script>
import {shortenUrl} from "../../apis/shorten"
import {copyToClipboard} from "../../utils/copy";
const baseOrigin = window.location.origin
export default {
  name: "index",
  data: _ => ({
    entering: false,
    originUrl: '',
    historyList: []
  }),
  mounted() {
  },
  methods: {
    shorten() {
      shortenUrl({
        url: this.originUrl,
        expire: 1800
      }).then(res => {
        console.log(res)
        const {data: {data: {origin, token, time}}} = res
        this.historyList.unshift({
          origin: origin,
          shorten: baseOrigin + '/' + token,
          time: time,
        })
        console.log(this.historyList)
      }).catch(err => {
        console.error(err)
      })
    },
    copyText(text, e) {
      copyToClipboard(text).then(res => {
        e.target.innerText = 'Copied'
      }).catch(err => console.error('error'))
    }
  }
}
</script>

<style scoped lang="less">
#index-page {
  height: 100vh;
  //user-select: none;
  .header {
    border-bottom: 1px solid #333;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    .title {
      font-size: 24px;
      display: flex;
      cursor: pointer;
      .part {
        display: block;
        width: 1ch;
        transition: .5s;
        overflow: hidden;
      }
      &:hover {
        .part {
          &:nth-child(1) {
            width: 2ch;
          }
          &:nth-child(2) {
            width: 3ch;
          }
          &:nth-child(3) {
            width: 9ch;
          }
        }
      }
    }
    .option-list {
      font-size: 16px;
      display: flex;
      list-style: none;
      align-items: center;
      .option-item {
        justify-content: center;
        height: 44px;
        display: flex;
        align-items: center;
        width: 60px;
        &:hover {
          cursor: pointer;
          transition: .5s;
          background-color: #bbb;
        }
      }
    }
  }
  .main {
    display: flex;
    align-items: center;
    flex-direction: column;
    .main-text {
      margin-top: 3rem;
      font-size: 64px;
      .tip-text {
        font-size: 24px;
      }
    }
    .main-input-area {
      margin-top: 3rem;
      display: flex;
      .text-input {
        height: 40px;
        width: 600px;
        border-radius: 0;
        border: 2px solid #555;
        padding: 0 10px;
        outline: none;
        font-family: 'Courier New', Avenir, Helvetica, Arial, sans-serif;
        font-size: 24px;
      }
      .handle-button {
        transition: .5s;
        margin-left: 20px;
        cursor: pointer;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 40px;
        font-size: 24px;
        border: 2px solid #333;
        color: #333;
        &:hover {
          background-color: #333333;
          color: white;
        }
      }
    }
    .history-area {
      margin-top: 2rem;
      width: 1000px;
      .history-item {
        margin-top: .5rem;
        border: 1px solid #999;
        width: 90%;
        font-size: 14px;
        height: 60px;
        display: flex;
        align-items: center;
        padding: 0 30px;
        justify-content: space-between;
        .urls-part {
          max-width: 85%;
          p {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
        }
        .handle-button {
          flex-basis: 80px;
          width: 80px;
          height: 30px;
          border: 2px solid #333;
          display: flex;
          font-weight: 700;
          justify-content: center;
          cursor: pointer;
          align-items: center;
          color: #333;
          transition: .5s;
          &:hover {
            background-color: #333333;
            color: white;
          }
        }
      }
    }
  }
  .footer {
    position: fixed;
    height: 30px;
    bottom: 0;
    width: 100%;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    .copyright {
      font-size: 14px;
    }
  }
}
</style>